@mixin background-gradient($bg-color, $type: $base-gradient, $direction: top) {
  background-image: none;
  background-color: $bg-color;

  @if $base-gradient != null and $bg-color != transparent {

    // Color stops provided
    @if type-of($type) == "list" {
      @include background-image(linear-gradient(color-stops($direction, $type)));
    }

      // Default gradients
    @else if $type == bevel {
      @include background-image(linear-gradient($direction, color_stops(
                      lighten($bg-color, 15%),
                      lighten($bg-color, 8%) 30%,
                      $bg-color 65%,
                      darken($bg-color, 6%)
      )));
    } @else if $type == glossy {
      @include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%))));
    } @else if $type == recessed {
      @include background-image(linear-gradient($direction, color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%))));
    } @else if $type == linear {
      @include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 5%), darken($bg-color, 10%))));
    } @else if $type == matte {
      @include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 15%), lighten($bg-color, 4%) 3%, darken($bg-color, 4%))));
    }
  }
}

// Special thanks to Lea Verou
// http://leaverou.me/css3patterns/

@mixin background-pattern-blueprint(
  $bgcolor: #269,
  $majorcolor: white,
  $minorcolor: rgba(#fff, .3),
  $majorsteps: 100px,
  $minorsteps: 20px,
  $majorwidth: 2px,
  $minorwidth: 1px
) {
  background-color: $bgcolor;
  @include background-image(
                  linear-gradient(top, color_stops($majorcolor $majorwidth, rgba($majorcolor, 0) $majorwidth)),
                  linear-gradient(left, color_stops($majorcolor $majorwidth, rgba($majorcolor, 0) $majorwidth)),
                  linear-gradient(top, color_stops($minorcolor $minorwidth, rgba($majorcolor, 0) $minorwidth)),
                  linear-gradient(left, $minorcolor $minorwidth, rgba($majorcolor, 0) $minorwidth)
  );
  background-size: $majorsteps $majorsteps, $majorsteps $majorsteps, $minorsteps $minorsteps, $minorsteps $minorsteps;
  background-position: -$majorwidth -$majorwidth, -$majorwidth -$majorwidth, -$minorwidth -$minorwidth, -$minorwidth -$minorwidth;
}